<template>
  <div style="width: 100%;height: 100%">
    <nav-bar v-for="(a,i) in lists" :key="i">
      {{a.title}}
    </nav-bar>
    <div class="detail">
      <div v-for="(item,index) in lists" :key="index" class="detail-main">
        <div class="detail-img">
          <img :src="`${publicPath}${item.imgs}`">
        </div>
        <div  class="detail-center">
          <h1>{{item.id}}</h1>
          <p>{{item.title}}</p>
          <p>{{item.author}}</p>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import http from "@/util/http"
export default {
  name: 'detail2',
  components:{
    navBar
  },
  data() {
    return {
      publicPath:process.env.BASE_URL,
      lists: []
    }
  },
  created() {
    //获取路由参数id
    // console.log('created',this.$route.params.myid)
    //利用id发axios，请求详情数据
  },
  mounted() {
    let id = this.$route.params.myid
    http.get(`/posts1`,{
      //根据id查询对应的数据
      params:{
        id
      }
    }).then(res =>{
      this.lists = res.data

    })
  }
}
</script>

<style scoped lang="scss">
.detail{
  width: 100%;
  height: 100%;
}
.detail-img{
  width: 100%;
  height: 10rem;
  @media screen and (min-width: 480px) {
    height: 8rem;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
.detail-center{
  margin: 20px;
}
</style>
